<template>
  <!-- 公告展示 -->
  <div class="output ql-snow">
    <div class="ql-editor" v-html="content" ref="content"></div>
  </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  data() {
    return {
      content: "",
      selfInfo: ""
    };
  },
  mounted() {
    window.richTextAnalysis = this.richTextAnalysis;
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    console.log();
  },
  methods: {
    // 获取用户的个人信息
    getUserInfo(data) {
      const res = JSON.parse(data);
      this.selfInfo = res;
    },
    richTextAnalysis(res) {
      const data = res.replace(/^\"|\"$/g, "");
      this.content = data;
      const bulletinContent = res.replace(/\\u003c/gi, "<");
      const newContext = bulletinContent.replace(/\\"/gi, "'");
      this.getImgSrc(newContext);
    },
    getImgSrc(richtext) {
      this.$nextTick(() => {
        // 循环给img标签加点击事件
        const img = this.$refs.content.querySelectorAll("img");
        for (let i = 0; i < img.length; i++) {
          img[i].addEventListener("click", () => {
            const params = { list: this.imgList, index: i };
            if (this.selfInfo.esType === 1) {
              window.webkit.messageHandlers.picturePreview.postMessage(params);
            } else {
              const newParams = JSON.stringify(params);
              window.editor.picturePreview(newParams);
            }
          });
        }
      });
      const imgStrs = richtext.match(/<img.*?>/g);
      if (imgStrs) {
        const urls = imgStrs.map(url => {
          return url.match(/\ssrc=['"](.*?)['"]/)[1];
        });
        this.imgList = [];
        urls.forEach(url => {
          this.imgList.push({ url });
        });
      }
    }
    // textBtn() {
    //   console.log("来吧，晚上没人!!!", this.content);

    //   window.editor.startEditor();
    // }
  }
};
</script>
<style lang="less" scoped>
.more-wrap {
  top: 0px;
  height: 100%;
  margin: 0px;
}
/deep/ .ql-editor .ql-size-huge {
  font-size: 18px;
}
/deep/ .ql-editor .ql-size-small {
  font-size: 14px;
}
/deep/ .ql-editor p {
  font-size: 16px;
}
/deep/ .ql-snow .ql-editor img {
  max-width: 100%;
}
/deep/ .ql-editor {
  white-space: inherit;
}
</style>
